<template>
  <div class="app1">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- 内容展示开始 -->
      <div class="wrapper" v-if="isShow">
        <div
          class="container"
          @click="detailsContianer(item.id)"
          v-for="(item, index) in container"
          :key="index"
        >
          <p class="h2">{{ item.title }}</p>
          <p class="tiems">
            <span class="icon_font">
              <van-icon name="clock-o" />
            </span>
            <span class="times_font">123213123213</span>
          </p>
          <p class="image_img">
            <img
              class="img"
              :src="item.teachers_list[0].teacher_avatar"
              alt=""
            />
            <span class="img_span">{{
              item.teachers_list[0].teacher_name
            }}</span>
          </p>
          <div class="bottom">
            <p class="baoming">{{ item.brows_num }}个人已经报名</p>
            <p v-if="item.price == 0" class="kaishi">免费</p>
            <p v-if="item.price != 0" class="kaishi">{{ item.price }}元</p>
          </div>
        </div>
      </div>
      <!-- 内容展示结束 -->
      <!-- 为空占位符开始 -->
      <div v-if="!isShow">
        <van-empty description="目前没有数据哦~" />
      </div>
      <!-- 为空占位符结束 -->
    </van-list>
  </div> 
</template>

<script>
import { lglGettingDataContainer } from "../../util/http";
export default {
  name: "",
  components: {},
  props: ["container", "isShow"],
  data() {
    return {
      listContainer: [], //全部的数据
      loading: false,
      finished: false,
      page:1
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //详情页
    detailsContianer(id) {
      this.$router.push({
        path: `/detailsPage`,
        query: {
          id,
        },
      });
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      
      setTimeout(async () => {
        
        await lglGettingDataContainer({
          one: "",
          xue: "",
          order: "",
          course_type: "",
          page:this.page
        }).then((res) => {
          
          if (this.container.length >= 45) {
            return false;
          }
          res.list.filter((item) => {
            this.container.push(item);
          });
        });
        this.page++
        //进入页面的时候 请求数据
        console.log("加载好了");
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.page == 3) {
          this.finished = true;
          this.$toast.fail({
            message: "到底了哦",
          });
        }
      }, 1000);
    },
  },
};
</script>

<style scoped >
.wrapper {
  width: 100vw;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding-bottom: 20px;
}
.container {
  width: 85%;
  height: 200px;
  box-shadow: 0 0 0.6 #000;
  border-radius: 5%;
  margin-top: 15px;
  background: #ddd;
  padding: 30px 20px 16px;
  box-sizing: border-box;
}
/* 文字 */
.h2 {
  font-size: 18px;
}
.tiems {
  line-height: 10px;
  font-size: 16px;
  /* margin-top: -13px; */
}
.icon_font {
  float: left;
}
.times_font {
  display: block;
  float: left;
  margin: 4px;
}
.image_img {
  float: left;
}
.img {
  width: 13%;
  border-radius: 44%;
  float: left;
}
.img_span {
  display: block;
  float: left;
  margin: 13px;
  font-size: 3.2vw;
  color: rgba(0, 0, 0, 0.45);
}
.bottom {
  float: left;
  width: 100%;
  height: 40px;
  border-top: 1px solid #f5f5f5;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.baoming {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.45);
}
.kaishi {
  font-size: 4.26667vw;
  color: #44a426;
}
.van-list {
  height: 100vh;
}
.app1 {
  width: 100vw;
  padding: 0, 0, 0, 0;
  box-sizing: border-box;
  padding-top: 88px;
}
.kong {
  width: 100vw;
  height: 60px;
}
</style>
